*{ margin: 0;padding: 0;box-sizing: border-box; }
*::before, *::after{box-sizing: border-box; }
a{text-decoration: none; color: inherit}
ol,ul,li{list-style: none;}
h1,h2,h3{font-weight: normal}
input{ outline: none; }
input:focus{ outline: none; }

body{
  font-size: 3.7vw;
}


.wrap{
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 1;
  background: white;
}
.tabs-content{
  margin-top: 28vw;
}
.tabs-content::before{
  content: '';
  display: table;
}
/*推荐音乐*/
section>h2:first-child{
  font-size: 1.2em;
  border-left: 2px solid #d33a31;
  margin: 6vw 0 4vw 0;
  font-weight: normal;
  padding-left: 2.6vw;
  line-height: 1;
  background: grba(255,255,255,0.4)
}

.topbar{
  background: #d43c33;
  padding: 4.5vw 2.5vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.topbar .logo{
  width: 38vw;
}
.topbar .downloadApp{
  line-height: 8vw;
  border: 1px solid rgba(255,255,255,0.5);
  border-radius: 4.25vw;
  display: block;
  color: #fff;
  text-decoration: none;
  padding: 0 0.8em;
}

.siteNav>ol{
  display: flex;
  text-align: center;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  font-size: 1.1em;
}
.siteNav>ol>li{
  flex: 1;
}
.siteNav>ol>li>span{
  line-height: 10vw;
  display: inline-block;
}


.playlists>ul{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  font-size: 0.93em;
}
.playlists>ul img{
  width: 100%;
}
.playlists>ul>li{
  width: calc(33.333333% - 1vw);
  margin-bottom: 4vw;
}
.playlists>ul>li p{
  padding: 0 1vw;
  display: -webkit-box;
  line-height: 5vw;
  height: 10vw;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}


.lastestMusic>ol{
  padding-left: calc(2.6vw + 2px);
}
#loading{
  text-align: center;
}
.lastestMusic>ol>li{
  border-bottom: 1px solid #e2e2e3;
  padding: 1vw 0;
  position: relative;
}
.lastestMusic>ol>li h3{
  font-size: 4.8vw;
}
.lastestMusic>ol>li p{
  font-size: 3.8vw;
  color: #888;
  padding: 0.5vw 0;
  display: flex;
  align-items: center;
}
.lastestMusic>ol>li svg.play{
  width: 7vw;
  height: 7vw;
  fill: #aaa;
  position: absolute;
  right: 4vw;
  top: 50%;
  transform: translateY(-50%)
}
.lastestMusic>ol>li svg.sq{
  width: 4.5vw;
  height: 4.5vw;
  margin-right: 0.5vw;
  fill: #f60;
}


section.art{
  padding-top: 17.6vw;
  background: transparent url(http://s3.music.126.net/m/s/img/recommand_bg_2x.png?d045fafc60e017b653f8065a87496922) no-repeat center 0;
  padding-bottom: 5vw;
}
section.art .logo{
  text-align: center;
}
section.art .logo svg{
  width: 61.7vw;
}
section.art .openApp{
  display: block;
  max-width: 81.3vw;
  padding: 1vw 0;
  margin: 0 auto;
  text-align: center;
  color: #d43c33;
  border: 1px solid;
  font-size: 4.3vw;
  line-height: 8.7vw;
  border-radius: 5.35vw;
  margin-top: 3vw;
}
section.art .copyright{
  font-size: 3.2vw;
  transform: scale(.75);
  color: #888;
  text-align: center;
  padding-top: 1.5vw;
}

/*热歌榜*/
.page-2 .ct{
  height: 40vw;
  background: url(//s3.music.126.net/m/s/img/hot_music_bg_2x.jpg?f01a252…) no-repeat;
  background-size: contain;
}
.page-2 .ct .update{
  color: rgba(255,255,255,0.6);
  font-size: 1vw;
  margin-left: 5vw;
  padding-top: 10vw;
}
.page-2 .ct .update>h3{
  font-size: 12vw;
}

.page-2 .hot>ol{
  padding-left: calc(2.6vw + 2px);
}
#page2-loading{
  text-align: center;
}
.page-2 .hot>ol>li{
  border-bottom: 1px solid #e2e2e3;
  padding: 1vw 0;
  position: relative;
}
.page-2 .hot>ol>li h3{
  font-size: 4.8vw;
}
.page-2 .hot>ol>li p{
  font-size: 3.8vw;
  color: #888;
  padding: 0.5vw 0;
  display: flex;
  align-items: center;
}
.page-2 .hot>ol>li svg.play{
  width: 7vw;
  height: 7vw;
  fill: #aaa;
  position: absolute;
  right: 4vw;
  top: 50%;
  transform: translateY(-50%)
}
.page-2 .hot>ol>li svg.sq{
  width: 4.5vw;
  height: 4.5vw;
  margin-right: 0.5vw;
  fill: #f60;
}
.page-2 .hotdn{
  text-align: center;
  color: #aaa;
  padding: 5vw 0;
}

/*搜索*/
.page-3{
  background: #fbfcfd;
}
.wrapPage{
  height: 20vw;
  position: relative;
  padding: 0 3vw;
  border-bottom: 1px solid #ccc;
}
.wrapPage .searchWrap{
  position: absolute;
  top: 5vw;
  left: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 3vw;
  padding: 1vw;
  width: 94vw;
  border: 1px solid #ccc;
  border-radius: 5vw;
  z-index: 2;
  background: #ebecec;
  color: #333;
}
.wrapPage .searchWrap svg{
  width: 6vw;
  height: 6vw;
}
#search{
  width: 100%;
  border: none;
  background: #ebecec;
  font-size: 3vw;
}


.page-3 ol>li{
  border-bottom: 1px solid #e2e2e3;
  padding: 1vw 0;
  position: relative;
}
.page-3 ol>li h3{
  font-size: 2.8vw;
}
.page-3 ol>li p{
  font-size: 1.8vw;
  color: #888;
  padding: 0.5vw 0;
  display: flex;
  align-items: center;
}
.page-3 ol>li svg.play{
  width: 7vw;
  height: 7vw;
  fill: #aaa;
  position: absolute;
  right: 4vw;
  top: 50%;
  transform: translateY(-50%)
}
.page-3 ol>li svg.sq{
  width: 4.5vw;
  height: 4.5vw;
  margin-right: 0.5vw;
  fill: #f60;
}

#output{
  padding: 2vw;
}

/*Tabs切换*/

ol.tabs-content>li.page-1{
  display: none;
}
ol.tabs-content>li.page-2{
  display: none;
}
ol.tabs-content>li.page-3{
  display: none;
}

ol.tabs-btn>li.active>span{
  border-bottom: 2px solid #d33a31;
  padding: 0 5px;
}
ol.tabs-btn>li.active{
  display: block;
  color: #d33a31;
}

ol.tabs-content>li.active{
  display: block;
}
